<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div>
    <div class="super-flow-demo1">
      <div class="flow-container" ref="flowContainer">
        <super-flow
          ref="superFlow"
          :link-base-style="linkBaseStyle"
          :node-list="nodeList"
          :link-list="linkList"
          :origin="origin"
          :draggable="false"
          :linkAddable="false"
        >
          <template v-slot:node="{ meta }">
            <el-tooltip :content="meta.name">
              <div :class="['flow-node', 'node-type-' + meta.level]" @click="nodeClick(meta)">
                {{ meta.name }}
              </div>
            </el-tooltip>
          </template>
        </super-flow>
        <!-- <div
          id="diagramTree"
          :style="{height: '100vh',width: '100vw', background: '#fff'}"
        ></div> -->
      </div>
    </div>
    <TableFiled v-if="tableFiledVisible" :tableFiledVisible="tableFiledVisible" :currentData="currentData" @handleEvent="handleEvent" />
    <el-dialog
      v-model="visible"
      custom-class="full-screen"
      :fullscreen="false"
      title="数据预览"
      width="1200px"
      append-to-body
      @close="visible = false"
    >
      <ViewOffice v-if="visible" :srcUrl="url" type=".xlsx" />
    </el-dialog>
  </div>
</template>
    
<script>
import * as echarts from 'echarts';
import SuperFlow from 'vue-super-flow';
import 'vue-super-flow/lib/index.css';
import { getBloodRelationship } from '@/api/metaData/index';
import TableFiled from './TableFiled.vue';
import ViewOffice from '@/components/ViewOffice'
export default {
  props: ['paramData'],
  data() {
    return {
      tableFiledVisible: false,
      visible: false,
      origin: [650, 750],
      nodeList: [],
      linkList: [],
      url: '',
      linkBaseStyle: {
        color: '#000', // line 颜色
        hover: '#FF0000', // line hover 的颜色
        textColor: '#666666', // line 描述文字颜色
        textHover: '#FF0000', // line 描述文字 hover 颜色
        font: '14px Arial', // line 描述文字 字体设置 参考 canvas font
        dotted: false, // 是否是虚线
        lineDash: [4, 4], // 虚线时生效
        background: '#e4d8bb' // 描述文字背景色
      },
      businessData: null,
      currentData: null,
    };
  },
  components: {
    SuperFlow,
    TableFiled,
    ViewOffice
  },
  mounted() {
    // document.addEventListener('mousemove', this.docMousemove);
    // document.addEventListener('mouseup', this.docMouseup);
    //执行查询
    this.doquery(this.paramData);
    // this.initCanvas();
  },
  methods: {
    initCanvas() {
      let treeInfo = this.chartData.data.faultTree;
      var myChart = echarts.init(document.getElementById("diagramTree"));
      deepHandleChildrenData(treeInfo.children)
      let data = [{
        name: treeInfo.description,
        relationId: treeInfo.id,
        symbolSize: [180, 80],
        // symbolOffset: [-20, 0],
        label: {
          borderWidth: 1, // 边框宽度
          borderRadius: [4, 4, 4, 4],
          backgroundColor: '#7856FF',
          color: '#fff',
          padding: [8, 5, 7, 5],
          rich: {
            value: {
              backgroundColor: "transparent",
            },
          },
        },
        children: treeInfo.children
      }]
      function deepHandleChildrenData(children) {
        children.forEach(child => {
          let { description, id, type, parentId } = child;
          if (child.children && child.children.length > 0) { 
            child.name = description;
            child.relationId = parentId;
            child.symbolSize = [120, 60];
            // child.symbolOffset = [0, -20];
            child.label = {
              borderColor: '#387DFF', // 边框颜色
              borderWidth: 1, // 边框宽度
              borderRadius: [4, 4, 4, 4],
              backgroundColor: '#fff',
              color: '#387DFF',
              padding: [8, 5, 7, 5],
              rich: {
                value: {
                  backgroundColor: "transparent",
                },
              },
            }
            deepHandleChildrenData(child.children)
          } else {
            child.name = description;
            child.relationId = parentId;
            child.symbolSize = [120, 60];
            // child.symbolOffset = [0, -20];
            child.label = {
              borderColor: '#387DFF', // 边框颜色
              borderWidth: 1, // 边框宽度
              borderRadius: [4, 4, 4, 4],
              backgroundColor: '#fff',
              color: '#387DFF',
              padding: [8, 5, 7, 5],
              rich: {
                value: {
                  backgroundColor: "transparent",
                },
              },
            }
          }
        })
      }
      let option = {
        series: [
          {
            roam: true,
            symbolKeepAspect: true,
            left: "0%",
            right: "0%",
            edgeShape: "polyline", //设置连接线曲线还是折线，默认情况下是曲线，curve曲线 polyline直线
            orient: "horizontal",
            symbol: "rectangle",
            backgroundColor: "#ffffff",
            label: {
              show: true,
              //   borderColor: "#555",
              // borderWidth: 1,
              borderRadius: 3,
              color: "#000000",
              backgroundColor: "#ffffff",
              // borderColor: "#000000",
              // borderWidth: 1,
              fontSize: 24,
              rich: {
                tc: {
                  align: "center",
                  color: "#000000",
                  // backgroundColor: "#ffffff",
                  // borderColor: "#000000",
                  // borderWidth: 1,
                  width: 130,
                  fontSize: 10,
                },
                titleBg: {
                  fontSize: 10,
                  align: "right",
                  height: 50,
                  borderColor: "#000",
                  borderWidth: 1,
                  // borderRadius: [3, 3, 0, 0],
                  width: "100%",
                  backgroundColor: "#ffffff",
                  color: "#000000",
                },
                head: {
                  fontSize: 10,
                  backgroundColor: "#ffffff",
                },
                headBg: {
                  fontSize: 10,
                  align: "center",
                  height: 25,
                  borderColor: "#000000",
                  borderWidth: 1,
                  borderRadius: [0, 0, 0, 0],
                  width: 100,
                  backgroundColor: "transparent",
                  color: "#000000",
                },
                headVal: {
                  fontSize: 10,
                  align: "center",
                  height: 25,
                  borderColor: "#000000",
                  borderWidth: 1,
                  borderRadius: [0, 0, 0, 0],
                  width: 100,
                  backgroundColor: "#ffffff",
                  color: "#000000",
                },
                hr: {
                  fontSize: 10,
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                footer: {
                  fontSize: 10,
                },
                footerBg: {
                  fontSize: 10,
                  align: "center",
                  height: 50,
                  borderColor: "#000",
                  borderWidth: 1,
                  borderRadius: [25, 25, 25, 25],
                  width: 50,
                  backgroundColor: "#ffffff",
                  color: "#000000",
                },
                target: {
                  fontSize: 10,
                  align: "center",
                  height: 20,
                  width: 60,
                  borderRadius: [0, 0, 0, 3],
                  padding: [0, 0, 0, 0],
                  color: "#000",
                  backgroundColor: "#FFFFFF",
                },
                value: {
                  fontSize: 10,
                  align: "center",
                  height: 38,
                  width: 120,
                  borderRadius: [0, 0, 3, 0],
                  padding: [0, 0, 0, 0],
                  color: "#000",
                },
                connectIcon: {
                  align: "center",
                  // backgroundColor: {
                  //   image: intersection
                  // },
                  height: 40,
                  width: 40,
                },
                connectIcon1: {
                  align: "center",
                  // backgroundColor: {
                  //   image: union
                  // },
                  height: 40,
                  width: 40,
                },
              },
            },
            lineStyle: {
              normal: {
                color: "source",
                type: "solid",
                width: 1,
                curveness: 0.4,
              },
            },
            itemStyle: {
              color: null,
              normal: {
                color: "#ffffff",
                borderWidth: 0,
              },
            },
            name: "Diagram Report",
            type: "tree",
            orient: "horizontal",
            initialTreeDepth: 30,
            data: data
          },
        ],
      };
      myChart.setOption(option);
    },
    handleEvent() {
      this.currentData = null;
      this.tableFiledVisible = false;
    },
    // 点击事件
    nodeClick(param) {
      if (![2, 4, 5].includes(param?.level)) {
        return;
      }
      if (param?.level === 5) {
        this.visible = true;
        this.url = param?.type;
      } else {
        this.currentData = param;
        this.tableFiledVisible = true;
      }
    },
    //查询
    doquery(param) {
      getBloodRelationship(param).then((res) => {
        this.businessData = res?.data;
        this.processFlow();
      });
    },
    //组装图形数据
    processFlow() {
      let nodeTmpArr = [];
      let linkTmpArr = [];
      const firstNode = {
        id: 'node_first',
        width: 160,
        height: 80,
        coordinate: [-600, -148],
        meta: {
          name: this.businessData?.databaseName,
          type: this.businessData?.databaseType,
          level: 1
        }
      };
      nodeTmpArr.push(firstNode);
      const children = this.businessData?.outerList || [];
      // 计算一共有多少个子分支
      let count = 0;
      let treeCountObj = [];
      this.businessData?.outerList.forEach((el) => {
        let thridCount = 0;
        el?.innerList?.forEach((item) => {
          count++;
          thridCount++;
        });
        treeCountObj.push({ thridCount });
      });
      const max = -147 + Math.floor(count / 2) * 120;
      let y2List = [];
      let y3List = [];
      // 第三层Y轴坐标
      for (let i = 0; i < count; i++) {
        y3List.push(max - i * 120);
      }
      //第二层坐标
      let thridIndex = 0;
      for (let i = 0; i < treeCountObj.length; i++) {
        y2List.push(max - thridIndex * 120 - (treeCountObj[i].thridCount - 1) * 0.5 * 60);
        thridIndex = treeCountObj[i].thridCount;
      }
      let thirdWhileCount = 0;
      children.forEach((el, index) => {
        // 第二层
        const node = {
          id: `node_second_${index}`,
          width: 180,
          height: 80,
          coordinate: [-400, y2List[index]],
          meta: {
            name: el.tableName,
            level: 2
          }
        };
        nodeTmpArr.push(node);
        linkTmpArr.push({
          startId: 'node_first',
          endId: `node_second_${index}`,
          startAt: [120, 30],
          endAt: [0, 20]
        });
        //第三层
        if (el.innerList && el.innerList.length > 0) {
          el.innerList.forEach((item, threeIndex) => {
            const thirdNode = {
              id: `node_third_${index}_${threeIndex}`,
              width: 180,
              height: 80,
              coordinate: [-100, y3List[thirdWhileCount]],
              meta: {
                name: item?.createTime,
                type: item?.inventoryCount,
                level: 3
              }
            };
            nodeTmpArr.push(thirdNode);
            linkTmpArr.push({
              startId: `node_second_${index}`,
              endId: `node_third_${index}_${threeIndex}`,
              startAt: [160, 20],
              endAt: [0, 10]
            });
            //第四层
            const forthNode = {
              id: `node_forth_${index}_${threeIndex}`,
              width: 180,
              height: 80,
              coordinate: [200, y3List[thirdWhileCount]],
              meta: {
                name: item?.tableName,
                type: null,
                level: 4
              }
            };
            //有第四层
            if (item?.tableName) {
              nodeTmpArr.push(forthNode);
              linkTmpArr.push({
                startId: `node_third_${index}_${threeIndex}`,
                endId: `node_forth_${index}_${threeIndex}`,
                startAt: [100, 20],
                endAt: [0, 20]
              });
            }
            //第五层
            const fivethNode = {
              id: `node_fiveth_${index}_${threeIndex}`,
              width: 180,
              height: 80,
              coordinate: [500, y3List[thirdWhileCount]],
              meta: {
                name: item?.fileName,
                type: item?.fileUrl,
                level: 5
              }
            };
            // 有第四层
            if (item?.tableName) {
              linkTmpArr.push({
                startId: `node_forth_${index}_${threeIndex}`,
                endId: `node_fiveth_${index}_${threeIndex}`,
                startAt: [100, 20],
                endAt: [0, 20]
              });
            } else {
              linkTmpArr.push({
                startId: `node_third_${index}_${threeIndex}`,
                endId: `node_fiveth_${index}_${threeIndex}`,
                startAt: [150, 20],
                endAt: [0, 20]
              });
              fivethNode.coordinate = [200, y3List[thirdWhileCount]];
            }
            nodeTmpArr.push(fivethNode);
            thirdWhileCount++;
          });
        }
      });
      this.nodeList = [...nodeTmpArr];
      this.linkList = [...linkTmpArr];
    },
    //取消
    cancel() {
      this.$emit('close');
    }
  }
};
</script>
    
<style lang="less">
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.link-base-style-form {
  .el-form-item {
    margin-bottom: 12px;
  }

  padding-bottom: 20px;
  border-bottom: 1px solid #dcdcdc;
}

.super-flow-demo1 {
  margin-top: 20px;
  width: 100%;
  height: 1200px;
  background-color: #f5f5f5;
  @list-width: 200px;

  > .node-container {
    width: @list-width;
    float: left;
    height: 100%;
    text-align: center;
    background-color: #ffffff;
  }

  > .flow-container {
    width: 100%;
    float: left;
    height: 100%;
    overflow: hidden;
  }

  .flow-node {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    // line-height: 40px;
    padding: 0 6px;
    font-size: 14px;
    &.node-type-5 {
      border: 1px solid #cdae2c;
      background: #fcf8e9;
    }
    &.node-type-1 {
      border: 1px solid #e6854e;
      background: #faefe9;
    }
    &.node-type-2 {
      border: 1px solid #ef80a2;
      background: #fcf1f4;
    }
    &.node-type-3 {
      border: 1px solid #d851c7;
      background: #f7eef6;
    }
    &.node-type-4 {
      border: 1px solid #5038c7;
      background: #f3f0ff;
    }
  }
}

.node-item {
  @node-item-height: 30px;
  font-size: 14px;
  display: inline-block;
  height: @node-item-height;
  width: 120px;
  margin-top: 20px;
  background-color: #ffffff;
  line-height: @node-item-height;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  text-align: center;
  z-index: 6;

  &:hover {
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
  }
}
</style>